<template>
<page-view class="food-detail-page">
    <page-header title="菜品详情" :showBack="true"></page-header>

    <div class="content-box" v-if="true">
        <skeleton title avatar :row="5" :loading="loading">
               <!-- 菜品图片展示 -->
               <div class="food-img-box">
                   <img v-lazy="BaseURL+foodDetail.food_img" @click.stop="showThisImage">
               </div>
               <!-- 详情展示 -->
               <ul class="food-desc">
                   <li><span>菜品名称:</span>{{foodDetail.food_name}}</li>
                    <li><span>菜品价格:</span>{{foodDetail.price}}</li>
                     <li><span>菜品重量:</span>{{foodDetail.weight}}</li>
                      <li class="food-intro">{{foodDetail.food_desc}}</li>

               </ul>
        </skeleton>
    </div>

</page-view>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import PageView from '../components/PageView.vue'
import { Skeleton } from 'vant';
import { ImagePreview } from 'vant';
import { useRoute } from 'vue-router';
import { reactive } from '@vue/reactivity';
import Api from "../utils/api";
export default {
  components: { PageView, PageHeader,Skeleton,ImagePreview },
    name:'FoodDetail',
    setup (props) {
        //是否显示骨架屏，传 false 时会展示子组件内容
        let loading=ref(true)
       

        //点击图片预览
        function showThisImage(){
            ImagePreview([props.f_item.food_img]);
        }

        let FoodDetail=reactive({})
        //接收路由穿过来的信息菜品id

        const getFoodById= async (id)=>{
            loading.value=true;

        }

    onMounted(() => {
                loading.value = false;
        });

        return {loading,showThisImage}
    }
}
</script>

<style lang="scss" scoped>

</style>